import { createApp } from 'vue';
import App from './Cell.vue';
import ObserveVisibility from './libs/reports/report-exposure';
import ReportClick from './libs/reports/report-click';
import ReportView from './libs/reports/report-view';
import SentryVue from './libs/reports/sentry';
import beacon from './libs/reports/beacon';
const app = createApp(App);
new SentryVue(app);
app.directive('report-view', ReportView);
app.directive('report-exp', ObserveVisibility);
app.directive('report-click', ReportClick);
app.directive('btn', {
  mounted(el: HTMLElement, binding) {
    const ele = el;
    ele.classList.add('directive-btn');
    let matrix = getComputedStyle(ele).transform;
    if (matrix.indexOf('matrix(') === 0) {
      const data = matrix.substr(6).replace(/[^\d.,]/g, '')
        .split(',')
        .map(v => +v);
      data[0] *= .8;
      data[3] *= .8;
      matrix = `matrix(${data.toString()})`;
    } else if (matrix.indexOf('matrix3d(') === 0) {
      const data = matrix.substr(8).replace(/[^\d.,]/g, '')
        .split(',')
        .map(v => +v);
      data[0] *= .8;
      data[5] *= .8;
      data[10] *= .8;
      matrix = `matrix3d(${data.toString()})`;
    } else {
      matrix = 'scale(.8)';
    }
    ele.ontouchstart = () => {
      ele.style.transform = matrix;
    };
    ele.ontouchend = () => {
      ele.style.transform = '';
    };
    ele.addEventListener('click', () => {
      const reportEvent = ele.title || ele.classList[0];
      if (reportEvent) {
        beacon.report(reportEvent, {});
      }
      if (binding.arg === 'click' && typeof binding.value === 'function') {
        binding.value();
      }
    });
  },
});
app.mount('#app');
